<!DOCTYPE html>
<html class="x-admin-sm">
  <head>
    <meta charset="UTF-8" />
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
    />
    <link rel="stylesheet" href="public/css/font.css" />
    <link rel="stylesheet" href="public/css/xadmin.css" />
    <script src="public/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="public/js/xadmin.js"></script>
    <script
      type="text/javascript"
      src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"
    ></script>
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a> <cite>用户列表</cite></a>
      </span>
      <a
        class="layui-btn layui-btn-small"
        style="line-height: 1.6em; margin-top: 3px; float: right;"
        onclick="location.reload()"
        title="刷新"
      >
        <i class="layui-icon layui-icon-refresh" style="line-height: 30px;"></i
      ></a>
    </div>
    <div class="layui-fluid">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <!-- <div class="layui-card-body">
              <form class="layui-form layui-col-space5">
                <div class="layui-inline layui-show-xs-block">
                  <input
                    class="layui-input"
                    autocomplete="off"
                    placeholder="开始日"
                    name="start"
                    id="start"
                  />
                </div>
                <div class="layui-inline layui-show-xs-block">
                  <input
                    class="layui-input"
                    autocomplete="off"
                    placeholder="截止日"
                    name="end"
                    id="end"
                  />
                </div>
                <div class="layui-inline layui-show-xs-block">
                  <input
                    type="text"
                    name="username"
                    placeholder="请输入用户名"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
                <div class="layui-inline layui-show-xs-block">
                  <button class="layui-btn" lay-submit="" lay-filter="sreach">
                    <i class="layui-icon">&#xe615;</i>
                  </button>
                </div>
              </form>
            </div> -->
            <div class="layui-card-header">
              <button class="layui-btn layui-btn-danger" onclick="delAll()">
                <i class="layui-icon"></i>批量删除
              </button>
              <button
                class="layui-btn"
                onclick="xadmin.open('添加用户','./user-add',600,400)"
              >
                <i class="layui-icon"></i>添加
              </button>
            </div>
            <table class="layui-hide" id="test" lay-filter='test'></table>

            <!-- <table class="layui-table" lay-filter="test" lay-data="{width:1200, url:'/api/users', page: true, limit: 5, limits:[5]}">
              <thead>
                <tr>
                  <th lay-data="{checkbox:true, fixed:'left'}" rowspan="1"></th>
                  <th lay-data="{field:'id', width:20}" rowspan="1">id</th>
                  <th lay-data="{field:'username', width:150}" rowspan="2">姓名</th>
                  <th lay-data="{field:'email', width:150}" rowspan="2">邮箱</th>
                  <th lay-data="{field:'is_admin', width:150,templet: '#isadmin'}" rowspan="2">管理员</th>
                  <th lay-data="{field:'status', width:150,templet: '#switchTpl'}" rowspan="2">状态</th> 
                  <th lay-data="{field:'createdAt', width:250}" rowspan="2" >创建时间</th>
                  <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="2">操作</th>
                </tr>
              </thead>
             
            </table> -->
            <script type="text/html" id="barDemo">
              <a class="layui-btn layui-btn-warm layui-btn-xs" onclick="xadmin.open('修改用户','user-edit',600,400)" lay-event="edit">修改</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
            <script type="text/html" id="switchTpl">
              <input type="checkbox" name="sex" value="" lay-skin="switch" lay-text="开启|禁用" lay-filter="sexDemo" {{ 1 == 10003 ? 'checked' : '' }}>
            </script>
            <script type="text/html" id="isadmin">
              <button class="layui-btn btn-primary">是</button>
            </script>
           
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    layui.use('table', function(){
      var table = layui.table;
      
      //第一个实例
      table.render({
        elem: '#test'
        ,height: 312
        ,url: '/api/users' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
          ,{field: 'username', title: '用户名', width:80}
          ,{field: 'email', title: '邮箱', width:180, sort: true}
          ,{field: 'is_admin', title: '管理员', width:80} ,
          // ,{field: 'status', title: '状态', width: 120}
          {
				field: 'answernum',
				title: '问题状态',
				minWidth: 150,
        templet: function(res) {  //回答数为0时:未回答 回答数>0且未解决时:未解决 
          console.log(res.is_admin);
          
				}
			},
          ,{field: 'createdAt', title: '创建时间', width:180, sort: true},
          {title: '操作',toolbar: '#barDemo',minWidth: 150,fixed: 'right',}
        ]]
      });
      table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
 
  if(layEvent === 'detail'){ //查看
    //do somehing
  } else if(layEvent === 'del'){ //删除
    
    layer.confirm('真的删除行么', function(index){
      console.log(obj.data.id);
      
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      $.ajax({
        type: "delete",
        url: "/api/user/delete/"+obj.data.id,
        data: {id:obj.data.id},
        dataType: "json",
        success: function (res) {
          console.log(res);
        },
        error: function (error) {
          
        }
      });
      
      //向服务端发送删除指令
    });
  } else if(layEvent === 'edit'){ //编辑
    //do something
    console.log(obj);
    
    
    //同步更新缓存对应的值
    // obj.update({
    //   username: '123'
    //   ,title: 'xxx'
    // });
  } else if(layEvent === 'LAYTABLE_TIPS'){
    layer.alert('Hi，头部工具栏扩展的右侧图标。');
  }
});
      
    });
    </script>
  <!-- <script>
    layui.use('table'),function(){
      var table = layui.table
      table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
console.log(data)
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
if(layEvent === 'detail'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
,title: 'xxx'
});
} else if(layEvent === 'LAYTABLE_TIPS'){
layer.alert('Hi，头部工具栏扩展的右侧图标。');
}
});
    }




layui.use('form', function(){
      var form = layui.form;
      
    form.on('switch(sexDemo)', function(obj){
      layer.tips(this.value + ' ' + this.name + '：'+ data.field)
      layer.confirm(
        status == 0 ? '确认要启用吗？' : '确认要禁用吗？',
        function () {
          // console.log(id)

          if (true) {
            $.ajax({
              type: 'put',
              url: '/api/user/status/' + filed.id,
              data: { id: data.filed.id },
              dataType: 'json',
              success: function (res) {},
              error: function (error) {},
            })

            layer.msg('已停用!', { icon: 5, time: 1000 })
            window.location.reload()
            //发异步把用户状态进行更改
            // $(obj).attr('title', '停用')
            // $(obj).find('i').html('&#xe62f;')

            // $(obj)
            //   .parents('tr')
            //   .find('.td-status')
            //   .find('span')
            //   .addClass('layui-btn-disabled')
            //   .html('已停用')
          } else {
            layer.msg('已启用!', { icon: 5, time: 1000 })
            // $(obj).attr('title', '启用')
            // $(obj).find('i').html('&#xe601;')
            // $(obj)
            //   .parents('tr')
            //   .find('.td-status')
            //   .find('span')
            //   .removeClass('layui-btn-disabled')
            //   .html('已启用')
          }
        }
      )
    });
  });
  </script> -->
  <!-- <script>
    $(document).ready(function (e) {
      $.ajax({
        type: 'get',
        url: '/api/users',
        dataType: 'json',
        success: function (res) {
          const users = res.data
          console.log(users)
        },
        error: function (e) {
          console.log(e)
        },
      })
    })
  </script> -->
  <!-- 操作按钮 -->
  
  <!-- <script>
    layui.use(['laydate', 'form','laypage'], function () {
      var laydate = layui.laydate
      var laypage = layui.laypage
      var form = layui.form

      laypage.render({
    elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
    ,count: 50 //数据总数，从服务端得到
  });
      // 监听全选
      form.on('checkbox(checkall)', function (data) {
        if (data.elem.checked) {
          $('tbody input').prop('checked', true)
        } else {
          $('tbody input').prop('checked', false)
        }
        form.render('checkbox')
      })

      //执行一个laydate实例
      laydate.render({
        elem: '#start', //指定元素
      })

      //执行一个laydate实例
      laydate.render({
        elem: '#end', //指定元素
      })
    })

    /*用户-停用*/
    function member_stop(status, id) {
      layer.confirm(
        status == 0 ? '确认要启用吗？' : '确认要禁用吗？',
        function () {
          console.log(id)

          if (true) {
            $.ajax({
              type: 'put',
              url: '/api/user/status/' + id,
              data: { id: id },
              dataType: 'json',
              success: function (res) {},
              error: function (error) {},
            })

            layer.msg('已停用!', { icon: 5, time: 1000 })
            window.location.reload()
            //发异步把用户状态进行更改
            // $(obj).attr('title', '停用')
            // $(obj).find('i').html('&#xe62f;')

            // $(obj)
            //   .parents('tr')
            //   .find('.td-status')
            //   .find('span')
            //   .addClass('layui-btn-disabled')
            //   .html('已停用')
          } else {
            layer.msg('已启用!', { icon: 5, time: 1000 })
            // $(obj).attr('title', '启用')
            // $(obj).find('i').html('&#xe601;')
            // $(obj)
            //   .parents('tr')
            //   .find('.td-status')
            //   .find('span')
            //   .removeClass('layui-btn-disabled')
            //   .html('已启用')
          }
        }
      )
    }

    /*用户-删除*/
    function member_del(id) {
      layer.confirm('确认要删除吗？', function (id) {
        //发异步删除数据
        $.ajax({
          type: 'delete',
          url: '/api/user/delete/' + id,
          data: { id: id },
          dataType: 'json',
          success: function (res) {},
          error: function (error) {},
        })
        layer.msg('已删除!', { icon: 1, time: 1000 })
        window.location.reload()
      })
    }

    function delAll(argument) {
      var ids = []

      // 获取选中的id
      $('tbody input').each(function (index, el) {
        if ($(this).prop('checked')) {
          ids.push($(this).val())
        }
      })

      layer.confirm('确认要删除吗？' + ids.toString(), function (index) {
        //捉到所有被选中的，发异步进行删除
        layer.msg('删除成功', { icon: 1 })
        $('.layui-form-checked').not('.header').parents('tr').remove()
      })
    }
  </script> -->
</html>
